<template>
    <div>
         <h3>门店列表显示</h3>
         
         <br>
         地区 <select v-model="querydate.aid">
            <option value="0">请选择地区</option>
            <option v-for="a in binddata" :value="a.addressId">{{a.addressName}}</option>
            </select>
        成立日期 <input type="date" v-model="querydate.time">
        门店状态 <select v-model="querydate.start">
            <option value="0">请选择状态</option>
            <option v-for="s in startdata" :value="s.id">{{s.name}}</option>
            </select>
        店长名称 <input type="text" v-model="querydate.name">
        <input type="button" value="查询" @click="queryShow">
        <br>
        <a href="/addstore">新增门店</a>
         
         <table class="table">
          <thead>
            <tr>
                <th>门店名</th>
                <th>所在地区</th>
                <th>门店店长名</th>
                <th>店长手机号</th>
                <th>门店成立日期</th>
                <th>同时接待最大人数</th>
                <th>门店状态</th>
                <th>记录录入日期</th>
                <th>是否已开业</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="d in data">
                <td>{{d.storeName}}</td>
                <td>{{d.addressName}}</td>
                <td>{{d.manager}}</td>
                <td>{{d.phone}}</td>
                <td>{{moment(d.createDate).format("YYYY年MM月DD日")}}</td>
                <td>{{d.maxPeople}}</td>
                <td>{{d.start==1?"休息":d.start==2?"营业":"关闭"}}</td>
                <td>{{moment(d.crateTime).format("YYYY-MM-DD HH:mm:ss")}}</td>
                <td>{{ new Date(d.createDate)<=new Date() ?"已开业":""}}</td>
            </tr>
          </tbody>
         </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import {ref,onMounted} from 'vue'
import moment from 'moment'

onMounted(()=>{
   
    Showstore()
    BindAddr()
})

//查询条件
const querydate=ref({
    aid:0,
    time:'',
    start:0,
    name:''
})
//条件查询
const queryShow=()=>{
    Showstore()
}

//从vue数组中配置数据创建下拉框
const startdata=[{id:1,name:'休息'},{id:2,name:'营业'},{id:3,name:'关闭'}]

//动态读取数据
const data=ref([])
//显示
const Showstore=()=>{
    axios.get("/api/Store/ShowStore",{params:querydate.value}).then(res=>{
        data.value=res.data
    })
}
const binddata=ref([])
const BindAddr=()=>{
    axios.get("/api/Address/GetAllAddress",{}).then(res=>{
        binddata.value=res.data
    })
}

</script>

<style scoped>

</style>